<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {

				//获得slider插件对象
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
				});

				//设置搜索按钮的点击事件
				document.getElementById("searchBtn").addEventListener("tap", function() {

					//获得搜索框输入的信息
					var keyword = document.getElementById("keyword").value;
					var beginTime = document.getElementById("beginTimeBtn").value;
					var endTime = document.getElementById("endTimeBtn").value;
					var minPrice = document.getElementById("minPrice").value;
					var maxPrice = document.getElementById("maxPrice").value;
					console.log("开始时间" + beginTime + ",结束时间" + endTime);

					//跳转到搜索列表页面
					mui.openWindow({
						url: "searchlist.html",
						id: "searchlist.html",
						extras: {
							keyword: keyword,
							beginTime: beginTime,
							endTime: endTime,
							minPrice: minPrice,
							maxPrice: maxPrice
						}
					});
				});

				//初始化日期选择事件
				document.getElementById("beginTimeBtn").addEventListener('tap', function() {
					var dDate = new Date();
					var minDate = new Date();
					var maxDate = new Date();
					//今天的日期
					var nowday = maxDate.getDate();
					maxDate.setDate(nowday + 11);

					plus.nativeUI.pickDate(function(e) {
						var d = e.date;
						document.getElementById("beginTimeBtn").value = d.getFullYear() + "-" + getFormat((d.getMonth() + 1)) + "-" +
							getFormat(d.getDate());
					}, function(e) {
						mui.toast("您没有选择日期");
					}, {
						title: "请选择日期",
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					});
				})
				//初始化日期选择事件
				document.getElementById("endTimeBtn").addEventListener('tap', function() {
					var dDate = new Date();
					var minDate = new Date();
					var maxDate = new Date();
					//今天的日期
					var nowday = maxDate.getDate();
					maxDate.setDate(nowday + 11);

					plus.nativeUI.pickDate(function(e) {
						var d = e.date;
						document.getElementById("endTimeBtn").value = d.getFullYear() + "-" + getFormat((d.getMonth() + 1)) +
							"-" +
							getFormat(d.getDate());
					}, function(e) {
						mui.toast("您没有选择日期");
					}, {
						title: "请选择日期",
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					});
				})
			});



			function getFormat(n) {
				if (n < 10) {
					return "0" + n;
				}
				return n;
			}
		</script>

		<!-- 广告轮播插件 -->
		<div class="mui-slider" style="height: 400px;">
			<div class="mui-slider-group mui-slider-loop">
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/a4.jpg " /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="images/a1.jpg" /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="images/a2.jpg" /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="images/a3.jpg" /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="images/a4.jpg" /></a></div>
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/a1.jpg" /></a></div>
			</div>
		</div>

		<!-- 搜索框 -->
		<form class="mui-input-group" style="margin: 10px;">
			<div class="mui-input-row">
				<label for="keyword">搜索框</label>
				<input type="text" id="keyword" class="mui-input-clear" placeholder="酒店名称/关键词/品牌/行政区域/房型等">
			</div>
			<div class="mui-input-row">
				<label>入住时间</label>
				<input type="text" id="beginTimeBtn" class="mui-input-clear" placeholder="选择入住时间">
			</div>
			<div class="mui-input-row">
				<label>离店时间</label>
				<input type="text" id="endTimeBtn" class="mui-input-clear" placeholder="选择离店时间">
			</div>
			<div class="mui-input-row">
				<label>最低价位</label>
				<input type="text" id="minPrice" class="mui-input-clear" placeholder="输入最低价位">
			</div>
			<div class="mui-input-row">
				<label>最高价位</label>
				<input type="text" id="maxPrice" class="mui-input-clear" placeholder="输入最高价位">
			</div>
			<div class="mui-button-row">
				<button id="searchBtn" type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search" style="width: 80%;">搜索</button>
			</div>
		</form>

	</body>

</html>
